<template>
	<view class="app-public-msg-detail-emoji">
		<swiper class="app-public-msg-detail-emoji__swiper" indicator-dots>
			<swiper-item v-for="(item,index) in emojiList" :key="index">
				<view class="app-public-msg-detail-emoji__swiper__item e-flex-wrap">
					<view class="app-public-msg-detail-emoji__swiper__emoji e-flex-xy-center" v-for="(items,indexs) in item" :key="indexs" @tap="$emit('addEmoji',items.emoji)">
						<text class="app-public-msg-detail-emoji__swiper__emoji-text">{{items.emoji}}</text>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script lang="ts" setup>
	import {
		emojiList
	} from './emoji'
</script>

<style lang="scss" scoped>
	@include appBem_b(public-msg-detail-emoji) {
		@include appBem_e(swiper) {
			width: 750rpx;
			height: 150px;
			&__item{
				@include flex;
			}
			&__emoji{
				width:75rpx;
				height: 30px;
				&-text{
					font-size: 19px;
				}
			}
		}
	}
</style>
